<template>
	<view>
		<cu-custom>
			<block slot="content">点餐订单</block>
		</cu-custom>
		<view class="p-t-15 p-b-15 p-l-15">
			<view class="p-r-15">
				<view v-show="!showAll">
					<view class="wrap flex m-b-10" v-for="(item,index) in list.slice(0,2)" :key="index">
						<view class="flex align-center">
							<image :src="item.img" class="imgs" mode=""></image>
						</view>
						<view class="flex-1 p-l-10 flex flex-direction justify-space-between">
							<view class="f-17 fontBold">
								{{item.name}}
							</view>
							<view class="">
								<view class="flex justify-space-between">
									<view class="f-12 black-9">
										<text v-if="item.spec">规格：{{item.spec}}</text>
									</view>
									<view class="f-12 nums">
										*{{item.num}}
									</view>
								</view>
								<view class="flex justify-space-between">
									<view class="orange f-17 fontBold">
										￥{{item.unit_price}}
									</view>
									<view class="orange f-17 fontBold">
										￥{{item.price}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-show="showAll">
					<view class="wrap flex m-b-10" v-for="(item,index) in list" :key="index">
						<view class="flex align-center">
							<image :src="item.img" class="imgs" mode=""></image>
						</view>
						<view class="flex-1 p-l-10 flex flex-direction justify-space-between">
							<view class="f-17 fontBold">
								{{item.name}}
							</view>
							<view class="">
								<view class="flex justify-space-between">
									<view class="f-12 black-9">
										<text v-if="item.spec">规格：{{item.spec}}</text>
									</view>
									<view class="f-12 nums">
										*{{item.num}}
									</view>
								</view>
								<view class="flex justify-space-between">
									<view class="orange f-17 fontBold">
										￥{{item.unit_price}}
									</view>
									<view class="orange f-17 fontBold">
										￥{{item.price}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="flex justify-center p-t-5 p-b-5" @click="changeShow" v-if="list&&list.length > 2">
					<image src="/static/img/right.png" class="see-more" :class="{'see-more-trans':showAll}"></image>
				</view>
				<view class="flex justify-space-between align-center m-t-15">
					<view class="fontBold f-16">
						车牌号
					</view>
					<view class="black-6 flex align-center p-l-15" @click="toCar">
						{{car_num}}
						<image src="/static/img/right-gray.png" class="right-gray m-t-1 m-l-5" mode=""></image>
					</view>
				</view>
				<!-- <view class="flex justify-space-between align-center m-t-15">
					<view class="fontBold f-16">
						陪喝人
					</view>
					<view class="black-6 flex align-center justify-end" @click="choosePeople" style="min-width: 200rpx;">
						<view class="flex align-center flex-1 justify-end" v-if="drinkList.length">
							<view class="flex align-center headimg-x-wrap" v-for="(item,index) in drinkList" :key="index">
								<image :src="item.photo" class="headimg-x"></image>
							</view>
						</view>
						<view class="" v-else>
							请选择
						</view>
						<image src="/static/img/right-gray.png" class="right-gray m-t-1 m-l-5" mode=""></image>
					</view>
				</view> -->
				<!-- <view class="flex justify-space-between align-center m-t-10">
					<view class="fontBold f-16">
						标签数据
					</view>
					<view class="black-6">
						哈哈
					</view>
				</view> -->
				<view class="m-t-10">
					<view class="fontBold f-16">
						备注
					</view>
					<view class="black-6 remarks-wrap">
						<textarea class="remarks" v-model="postData.remarks" :auto-height="true"
							placeholder="输入备注"></textarea>
					</view>
				</view>
				<view class="flex justify-space-between align-center m-t-10">
					<view class="fontBold f-16">
						总价
					</view>
					<view class="black-6">
						￥{{total_price}}
					</view>
				</view>
				<view class="flex justify-space-between align-center m-t-10">
					<view class="fontBold f-16">
						抵扣金额
					</view>
					<view class="orange flex align-center" v-if="coupon_price">
						减￥{{coupon_price}}
						<!-- <image src="/static/img/right-gray.png" class="right-gray m-t-1 m-l-5" mode=""></image> -->
					</view>
					<view class="orange flex align-center" v-if="!coupon_price">
						￥0
					</view>
				</view>
				<view class="flex justify-space-between align-center m-t-10">
					<view class="fontBold f-16">
						服务费
					</view>
					<view class="black-6">
						￥{{service_price}}
					</view>
				</view>
				<view class="flex justify-space-between align-center m-t-10">
					<view class="fontBold f-16">
						实际应付金额
					</view>
					<view class="black-6">
						￥{{ total_price_all}}
					</view>
				</view>
			</view>
			<view class=" m-t-10 ">
				<view class="fontBold f-16 m-b-10">
					陪喝人员
				</view>
				<scroll-view scroll-x="true" style="white-space: nowrap;" @scrolltolower="getPeoUp">
					<view class="flex p-b-15 ">
						<view class="top-item" v-for="(item,index) in peoList" :key="item.id" @click="choosePeopleItem(item)">
							<view class="sel-wrap">
								<image :src="item.check?'/static/img/seled.png':'/static/img/sel.png'" class="sel" mode=""></image>
							</view>
							<view class="flex align-center">
								<image :src="item.photo" class="top-img"></image>
							</view>
							<view class="p-t-10 p-l-10 p-r-10 p-b-10">
								<view class="fontBold text-overflow-2 top-title">
									{{item.name}}
								</view>
								<view class="f-12 text-overflow-2 top-text m-t-5">
									{{item.introduce}}
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view style="height: 130rpx;"></view>
		<view class="bottom-wrap ">
			<view class="flex align-center justify-space-between">
				<view class="orange">
					<text class=" m-r-5 fontBold">定金</text>
					<text class="f-22 fontBold">￥{{deposit}}</text>
				</view>
				<view class="bottom-btn bottom-btn2" @click="toPay">
					去支付
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="center" :animation="false">
			<view class="popup_content">
				<view class="fontBold f-20 orange text-center m-b-15">
					选择陪喝人
				</view>
				<scroll-view scroll-y="true" style="min-height: 500rpx;">
					<view class="p-t-5 p-b-5">
						<view class="scale-1px-bottom p-t-5 p-b-5 flex align-center justify-space-between" v-for="(item,index) in peoList" :key="item.id" @click="choosePeopleItem(item)">
							<view class="flex align-center p-r-10">
								<image :src="item.check?'/static/img/seled.png':'/static/img/sel.png'" class="sel" mode=""></image>
							</view>
							<view class=" flex align-center">
								<view class="fontBold p-r-20">
									{{item.name}}
								</view>
								<view class="flex align-center">
									<image :src="item.photo" class="headimg"></image>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="flex justify-center m-t-20">
					<view class=" btn btn2 m-r-10" @click="closePop()">
						取消
					</view>
					<view class=" btn" @click="surePeople">
						确认
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				postData: {
					remarks: ''
				},
				total_price: 0,//总价
				coupon_price: 0,//折扣
				total_price_all:0,//实际金额
				service_price:0,
				deposit: 0,
				car_num: '',
				car_id: '',
				list: [],
				info: {},

				set_menu_id: 0,
				id: 0,
				roomId: 0,
				book_at: '',
				user_num: 0,
				when:1,//1中午 2晚上
				showAll: false,
				drinkQuery:{
					page:1,
					total:1,
					keyword:'',
					page_size:20
				},
				last_page:1,
				peoList:[],
				drinkList:[]
			}
		},
		onLoad(option) {
			this.id = option.id;
			this.roomId = option.roomId;
			if (option.book_at) {
				this.book_at = option.book_at;
			}
			if (option.user_num) {
				this.user_num = option.user_num;
			}
			if (option.when) {
				this.when = option.when;
			}
			if (option.set_menu_id) {
				this.set_menu_id = option.set_menu_id;
			}
			this.getInfo();
			this.getPeople();
		},
		onShow() {
			let transferObj = this.$store.state.transferObj;
			if (transferObj) {
				this.car_num = transferObj.car_num;
				this.car_id = transferObj.car_id;
			}
		},
		methods: {
			isWeixin() {
				var ua = window.navigator.userAgent.toLowerCase();
				if (ua.match(/MicroMessenger/i) == 'micromessenger') {
					return true;
				} else {
					return false;
				}
			},
			isIOSWechat() {
				const ua = navigator.userAgent.toLowerCase();
				return /iphone|ipad|ipod/.test(ua) && /micromessenger/.test(ua);
			},
			toPay() {
				if (!this.isWeixin()) {
					this.$util.showToast('请使用微信浏览器', 1500);
					return;
				}
				uni.showLoading({
					title: '支付处理中...',
					mask: true
				});
				let arr = [];
				if(this.peoList.length){
					this.peoList.forEach(item=>{
						if(item.check){
							arr.push(item.id);
						}
					})
				}
				let data = {
					compartment_id: this.roomId,
					user_num: this.user_num,
					when: this.when,
					book_at: this.book_at,
					car_num: this.car_num,
					beizhu: this.postData.remarks,
					drink_with_me_ids:arr.length?arr.join(','):''
				}
				if (this.set_menu_id) {
					data.set_menu_id = this.set_menu_id;
				}
				this.$http('/apicloud/order/payment', data).then(res => {
					// if (res.code == 200) {
					// 	setTimeout(() => {
					// 		uni.navigateTo({
					// 			url: '/pages/operate/paySuccess'
					// 		})
					// 	}, 1000)
					// }
					if (res.code === 200) {
						this.wechatPay(res.data);
					} else {
						uni.showToast({
							title: res.msg || '支付失败',
							icon: 'none'
						});
					}
				})

			},
			wechatPay(payParams) {
				return new Promise((resolve, reject) => {
					if (typeof WeixinJSBridge === "undefined") {
						if (document.addEventListener) {
							document.addEventListener('WeixinJSBridgeReady', () => {
								this.executeWechatPay(payParams, resolve, reject);
							}, false);
						}
						return reject(new Error("微信环境未准备好"));
					}

					this.executeWechatPay(payParams, resolve, reject);
				});
			},
			executeWechatPay(params, resolve, reject) {
				WeixinJSBridge.invoke(
					'getBrandWCPayRequest', {
						appId: params.appId,
						timeStamp: params.timeStamp.toString(),
						nonceStr: params.nonceStr,
						package: params.package,
						signType: params.signType||'MD5',
						paySign: params.sign
					},
					(res) => {
						if (res.err_msg === "get_brand_wcpay_request:ok") {
							uni.redirectTo({
								url: '/pages/operate/paySuccess?price=' + this.deposit
							});
							resolve(res);
						} else if (res.err_msg === "get_brand_wcpay_request:cancel") {
							uni.showToast({
								title: '您已取消支付',
								icon: 'none'
							});
							reject(new Error('用户取消支付'));
						} else {
							uni.showToast({
								title: '支付失败:' + res.err_msg,
								icon: 'none'
							});
							reject(new Error(res.err_msg));
						}
					}
				);
			},
			toCar() {
				uni.navigateTo({
					url: '/pages/mine/carList?type=2'
				})
			},
			getInfo() {
				let data = {
					compartment_id: this.roomId,
					user_num: this.user_num,
					when: this.when,
					book_at: this.book_at
				}
				if (this.set_menu_id) {
					data.set_menu_id = this.set_menu_id;
				}
				this.$http('/apicloud/order/pendingOrder', data).then(res => {
					if (res.code == 200) {
						let datas = res.data;
						this.total_price = datas.good_price;
						this.deposit = datas.deposit;
						this.service_price = datas.service_price;
						this.coupon_price = datas.coupon_price;
						this.total_price_all = datas.total_price;
						this.list = datas.cuisine;
						// this.list.forEach(item => {
						// 	let total = parseFloat(item.price) * parseFloat(item.num);
						// 	let total1 = String(total);
						// 	total1 = total1.split('.')[1] ? parseFloat(total1).toFixed(2) : total1;
						// 	this.$set(item, 'total', total1);
						// })
						let car_num = datas.car_num;
						car_num.forEach(item => {
							if (item.is_default == 1) {
								this.car_id = item.id;
								this.car_num = item.car_number;
							}
						})
					}
				})
			},
			changeShow() {
				this.showAll = !this.showAll;
			},
			openPop(){
				this.$refs.popup.open();
			},
			closePop(){
				this.$refs.popup.close();
			},
			getPeoUp(){
				if(this.drinkQuery.page >= this.last_page)return;
				this.drinkQuery.page++;
				this.getPeople();
			},
			getPeople(){
				let data = this.drinkQuery;
				this.$http('/apicloud/Order/drinkWithMeList', data).then(res => {
					let list = res.data.list.data;
					this.drinkQuery.total = res.data.list.total;
					list.forEach(item=>{
						this.$set(item,'check',false);
					})
					if(this.drinkQuery.page == 1){
						this.last_page = res.data.list.last_page;
						this.peoList = list;
					}else{
						this.peoList = this.peoList.concat(list);
					}
				})
			},
			choosePeople(){
				this.openPop();
			},
			choosePeopleItem(item){
				item.check = !item.check;
			},
			surePeople(){
				let arr = [];
				this.peoList.forEach(item=>{
					if(item.check){
						arr.push(item);
					}
				})
				this.drinkList = arr;
				this.closePop();
			},
		}
	}
</script>

<style lang="less">
	.wrap {
		background: #FFFFFF;
		box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.05);
		border-radius: 16rpx;
		padding: 20rpx;
	}

	.imgs {
		width: 160rpx;
		height: 160rpx;
		border-radius: 16rpx;
	}

	.nums {
		color: #FFCB00;
	}

	.right-gray {
		width: 28rpx;
		height: 28rpx;
	}

	.remarks-wrap {
		padding: 20rpx;
		border-radius: 16rpx;
		border: 1px solid #ccc;
		margin-top: 20rpx;
	}

	.remarks {
		min-height: 60rpx;
		width: 100%;
	}

	.bottom-wrap {
		box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.07);
		border-radius: 20px 20px 0 0;
		height: 130rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 88;
		background: #ffffff;
		width: 100%;
		padding: 15rpx 50rpx 0 50rpx;

		.bottom-btn {
			width: 45%;
			height: 76rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #ffffff;
			font-weight: bold;
			border-radius: 60rpx;
		}

		.bottom-btn2 {
			background: #FF5200;
		}
	}

	.see-more {
		width: 44rpx;
		height: 44rpx;
		transform: rotate(90deg);
		transition: .3s;
	}

	.see-more-trans {
		transform: rotate(-90deg);
		transition: .3s;
	}
	.popup_content {
		width: 90%;
		min-width: 660rpx;
		min-height: 600rpx;
		background-color: #fff;
		border-radius: 24rpx;
		font-size: 28rpx;
		position: relative;
		padding: 30rpx;
	
		.btn {
			background: #FF5200;
			color: #ffffff;
			border-radius: 60rpx;
			width: 40%;
			height: 76rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.btn2{
			background: #666666;
		}
	}
	.sel{
		width: 40rpx;
		height: 40rpx;
	}
	.headimg{
		width: 74rpx;
		height: 74rpx;
		border-radius: 50%;
	}
	.headimg-x-wrap{
		margin-left: -20rpx;
	}
	.headimg-x{
		width: 52rpx;
		height: 52rpx;
		border-radius: 50%;
	}
	.top-item{
		width: 220rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 16px rgba(0,0,0,0.1);
		border-radius: 16rpx;
		margin-right: 15rpx;
		position: relative;
		.sel-wrap{
			position: absolute;
			right: 10rpx;
			top:10rpx;
			z-index:10;
		}
		.top-title{
			text-align: center;
			white-space: normal;
		}
		.top-text{
			text-align: center;
			white-space: normal;
		}
		.top-img{
			width: 220rpx;
			height: 200rpx;
			border-radius: 16rpx 16rpx 0 0;
		}
	}
</style>